﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>中南大学自动化学院模型管理平台</title>
    <link rel="icon" type="image/x-icon" href="./favicon.ico">
    <script type="text/javascript">
        // 检测浏览器版本
        (function () {
            var version = ieVer();
            if (version < 9) {
                location.href = "../version.html";
            }
            function ieVer() {
                var userAgent = navigator.userAgent;
                var isOpera = userAgent.indexOf("Opera") > -1;
                var isIE =
                  userAgent.indexOf("compatible") > -1 &&
                  userAgent.indexOf("MSIE") > -1 &&
                  !isOpera;
                if (isIE) {
                    var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
                    reIE.test(userAgent);
                    var IEVersion = parseFloat(RegExp["$1"]);
                    return Math.floor(IEVersion);
                }

                return Infinity;
            }
        })();
    </script>
    <link type="text/css" rel="stylesheet" href="./css/reset.css" />
    <link type="text/css" rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/jquery.mCustomScrollbar.css" />
    <link type="text/css" rel="stylesheet" href="./css/details.css" />
    <script type="text/javascript" src="./js/jquery.1.10.2.js"></script>
    <script type="text/javascript" src="./js/vue.min.2.5.13.js"></script>
    <script type="text/javascript" src="./js/jquery.zxxbox.3.0-min.js"></script>
    <script type="text/javascript"
            src="./js/jquery.mCustomScrollbar.concat.min.js"></script>
    <script type="text/javascript"
            src="./js/syntaxhighlighter/scripts/shCore.js"></script>
    <script type="text/javascript"
            src="./js/syntaxhighlighter/scripts/shAutoloader.js"></script>
    <link type="text/css"
          rel="stylesheet"
          href="./js/syntaxhighlighter/styles/shCoreJisu.css" />
    <script type="text/javascript">
        function path() {
            var args = arguments,
              result = [];
            for (var i = 0; i < args.length; i++)
                result.push(args[i].replace("$", "./js/syntaxhighlighter/scripts/"));
            return result;
        }
        $(function () {
            SyntaxHighlighter.autoloader.apply(
              null,
              path(
                "php                    $shBrushPhp.js",
                "java                   $shBrushJava.js",
                "objc obj-c             $shBrushObjC.js",
                "actionscript3 as3      $shBrushAS3.js",
                "bash shell             $shBrushBash.js",
                "coldfusion cf          $shBrushColdFusion.js",
                "c# c-sharp csharp      $shBrushCSharp.js",
                "delphi pascal          $shBrushDelphi.js",
                "jfx javafx             $shBrushJavaFX.js",
                "js jscript javascript  $shBrushJScript.js",
                "perl pl                $shBrushPerl.js",
                "py python              $shBrushPython.js",
                "ruby rails ror rb      $shBrushRuby.js",
                "vb vbnet               $shBrushVb.js",
                "xml xhtml xslt html    $shBrushXml.js"
              )
            );
            //SyntaxHighlighter.defaults['gutter'] = false;
            SyntaxHighlighter.defaults["toolbar"] = false;
            SyntaxHighlighter.defaults["auto-links"] = false;
            SyntaxHighlighter.defaults["quick-code"] = false;
            SyntaxHighlighter.all();
        });
    </script>
    <script src="./js/details.js"></script>
    <script></script>
</head>
<body>
    <div id="app" class="vue-details">
        <div id="scoller" class="page">
            <div class="carousel-wrap">
                <ul class="slide-ul">
                    <li style="background-image:url('');background-repeat: repeat-x;">
                        <p class="background-color-left" style="background-image:url('');background-repeat: repeat-x;"></p>
                        <div class="main-banner">
                            <img src="./images/banner.jpg" />
                            <!---->
                        </div>
                    </li>
                </ul>
                <!---->
            </div>
            <div class="icon-banner">
                <div class="icon-box">
                    <!-- <div class="banner-title-box">
                      <p class="banner-title">平台简介</p>
                      <p class="banner-title-2">Platform Profile</p>
                    </div> -->
                    <div class="icons">
                        <div class="sum-box">
                            已收录模型: &nbsp;<span>5634</span>&nbsp;&nbsp; 总调用次数:
                            &nbsp;<span>4324732</span>&nbsp;&nbsp;
                            今日收录:&nbsp;<span>43</span>&nbsp;&nbsp; 总浏览: &nbsp;<span>6743243</span>
                        </div>
                        <div class="icon-item">
                            <img src="./images/7.png" />
                            <p class="icon-font">精准优质</p>
                            <p class="icon-font-light">
                                专业的数据开放平台，为开发者提供了精准、优质的数据资源
                            </p>
                        </div>
                        <div class="icon-item">
                            <img src="./images/8.png" />
                            <p class="icon-font">稳定高效</p>
                            <p class="icon-font-light">
                                多层防护、多点集群布署，24小时不间断数据维护、更新优化
                            </p>
                        </div>
                        <div class="icon-item">
                            <img src="./images/9.png" />
                            <p class="icon-font">简单便捷</p>
                            <p class="icon-font-light">
                                专业的数据开放平台，为开发者提供了精准、优质的数据资源
                            </p>
                        </div>
                        <div class="icon-item">
                            <img src="./images/10.png" />
                            <p class="icon-font">预警监控</p>
                            <p class="icon-font-light">
                                针对API接口使用周期预警和API参数实时预警并推送预警信息
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div id="topcrumb" class="wid">
                <div class="topcrum-box">
                    <a href="/code/index.html">首页</a>
                    <span></span>
                    <a :href="`/code/details?id=${details.id}`">{{details.name}}</a>
                </div>
            </div>
            <div class="wid" id="apiibox">
                <div id="apiileft">
                    <div id="apiinfo" style="border-top-color: #ffd800;">
                        <div id="apiinfoleft">
                            <img v-show="details.apipic" :src="details.apipic"
                                 alt="details.name" />
                            <a href="javascript:;" id="collectbtn" @click="clickCollectBtn" class="">
                                <span></span>
                            </a>
                        </div>
                        <div id="apiinforight">
                            <div id="apiitop">
                                <h1>{{details.name}}</h1>
                                <div id="apinuminfo">
                                    <ul>
                                        <li id="clicknum">{{details.clicknum}}</li>
                                        <li id="collectnum">{{details.collectnum}}</li>
                                        <li id="usednum">{{details.usednum}}</li>
                                    </ul>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                            <div id="apiidesc">
                                {{details.apiidesc}}
                            </div>
                            <div id="productTags">
                                <span v-for="tag in details.apitags" :style="`background-color:${randomColor()}`">{{tag}}</span>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div id="apicontent">
                        <div id="apitab">
                            <ul>
                                <li><a href="javascript:;" class="on">模型介绍</a></li>
                                <li><a href="javascript:;">模型文档</a></li>
                                <li><a href="javascript:;">示例代码</a></li>
                                <li><a href="javascript:;">常见问题</a></li>
                                <!--<li><a href="javascript:;">用户评价</a></li>-->
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <div id="apibox">
                            <section class="myli" id="apimain">
                                <h2>模型介绍</h2>
                                <div class="apiDetailIntroduce__box">
                                    <p>模型名称:<span>{{details.name}}</span></p>
                                    <p>
                                        模型功能描述:<span>{{details.apiidesc}}</span>
                                    </p>
                                </div>
                            </section>

                            <section class="myli" id="apidoc">
                                <h2>模型文档</h2>
                                <div class="apiDetailIntroduce__box">
                                    <p>
                                        <label for="">请求地址: </label><span class="lightblue">{{details.url}}</span>
                                    </p>
                                    <p>请求key:<span>{{details.key}}</span></p>
                                    <p>请求格式:<span>{{details.context}}</span></p>
                                    <p>
                                        请求示例:<span>
                                            {{details.demourl}}
                                        </span>
                                    </p>
                                </div>
                            </section>

                            <section class="myli" id="apicode">
                                <h2>示例代码</h2>
                                <div class="apiDetailIntroduce__box">
                                    <div class="coderequest">
                                        <div class="alh4line">
                                            <h4>请求代码：</h4>
                                            <!-- <a href="/code/idcardrecognition/">查看代码</a> -->
                                        </div>
                                        <div class="codetab">
                                            <ul>
                                                <li v-for="(item, index) in details.apicode"><a href="javascript:;" class="index===0?'on':''" @click="changedCode">{{item.lan}}</a></li>
                                            </ul>
                                            <div class="clearfix"></div>
                                        </div>
                                        <div class="codebox">
                                            <div class="codeitem" v-for="(item, index) in details.apicode" style="{display: (index!==0?'none':'inherit')}">
                                                <!--<pre v-if="getClass(item.lan) === 'php'" class="brush:php;">{{item.code}}</pre>
                                                <pre v-if="getClass(item.lan) === 'java'" class="brush:java;">{{item.code}}</pre>-->
                                                <pre v-if="getClass(item.lan) === 'python'" class="brush:python;">{{item.code}}</pre>
                                            </div>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                            </section>
                            <section class="myli" id="apierror">
                                <h2>常见问题</h2>
                                <div class="commonProblems" v-for="(item,index) in details.apierror">
                                    <div class="title">
                                        {{index+1}}、{{item.title}}
                                    </div>
                                    <p>
                                        {{item.desc}}
                                    </p>
                                </div>
                            </section>

                            <div class="clearfix"></div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div id="apiiright">
                    <div id="relatedata">
                        <h2 class="tipH2"><strong>相关数据</strong><span>RELATED DATA</span></h2>
                        <ul v-if="relation.length>0">
                            <li v-for="item in relation" :key="item.Project_Id" >
                                <a :href="`./details.html?id=${item.Project_Id}`">
                                    <img :src="item.Project_Img" height="45" :alt="item.Project_Name">
                                    <h3>{{item.Project_Name.substring(0,8)+'...'}}</h3>
                                </a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <script src="./js/widget.js"></script>
</body>
</html>
